<template>
	<div class="main-content">
		<div style="padding:20px;">
			<div style="margin-bottom:20px;"><font>当前状态：</font>{{currentStatus}}</div>
			<ul class="custom_list clearfix">
				<li :class="{active:item.isActive}" v-for="(item,index) in customerArray" :key="index">
					<div class="cut_line"  :class="{'cut_line_fail':item.state}">
						<span></span>
					</div>
					<div class="cut_lin"  :class="{'cut_lin_fail':item.state}"  v-if="item.name !='结佣'"></div>
					<p class="cut_title">{{item.name}}</p>
				</li>
			</ul>
		</div>
		<div class="concent_title" style="height:180px;">
			<span></span>
			<p>楼盘信息</p>
				<hr>
			<ul class="info_list">
				<li>
					<p>楼盘名称:</p><font>{{cusPre.premisesName}}</font>
					<b><a v-on:click="premisesDetail()" ><b style="color:blue;">查看楼盘详情</b></a></b>
					</li>
				<li>
					<p>楼盘佣金:</p><font>{{cusPre.commissionAmount}}</font>
				</li>
				<li>
					<p>带看奖:</p><font>{{cusPre.reward}}&nbsp;元</font>
				</li>
				<li>
					<p>{{cusPre.dealType == 2?'现金奖':'成交奖'}}:</p><font>{{cusPre.dealAward}}&nbsp;元</font>
				</li>
			</ul>
		</div>
		<div class="concent_title" style="height:210px;">
			<span></span>
			<p>经纪人信息</p>
				<hr>
			<ul class="info_list">
				<li>
					<p>报备类型:</p><font>{{cusPre.reportType}}</font>
				</li>
				<li>
					<p>经纪人:</p><font>{{cusPre.staffName}}</font>
				</li>
				<li>
					<p>所属机构:</p><font>{{cusPre.staffCompanyName}} &nbsp {{cusPre.staffStoreName}} &nbsp {{cusPre.staffGroupName}}</font>
				</li>
				<li v-if="cusPre.reportType=='案场代报备'">
						<p>报备人:</p><font>{{cusPre.assistantName}}</font>
				</li>
				<li v-else>
					<p>报备人:</p><font>{{cusPre.staffName}}</font>
				</li>
				<li>
					<p>渠道经理:</p><font>{{cusPre.principalName}}</font>
				</li>
			</ul>
		</div>
		<br>
		<div class="concent_title" >
			<span></span>
			<p>客户信息</p>
				<hr>
			<ul class="info_list">
				<li>
					<p>客户:</p><font>{{cusPre.name}}&nbsp;&nbsp;{{cusPre.genderCN}}</font>
				</li>
				<li>
					<p>客户电话:</p><font>{{cusPre.mobile}}</font>
				</li>
				<li v-if="isShow">
					<p>{{roomNum}}</p><font>楼栋号{{cusPre.buildingName}}&nbsp;房间号{{cusPre.roomName}}</font>
				</li>
			</ul>
		</div>
		<div class="concent_title" v-if="visitReportShow">
			<span></span>
			<p>其他信息</p>
			<hr>
			<ul class="info_list">
				<li>
					<p>预计到场时间:</p><font>{{visitTime}}</font>
				</li>
				<li>
					<p>到场方式:</p><font>{{ visitWay}}</font>
				</li>
				<li>
					<p>备注：</p><font>{{remark}}</font>
				</li>
			</ul>
		</div>
		<div class="concent_title" style="height:210px;">
			<span></span>
			<p>首付信息</p>
			<hr>
			<ul class="info_list">
				<li>
					<p>首付总金额:</p>
					<font>{{cusPre.firstPayment}}元</font>
				</li>
				<li>
					<p>首付总比例:</p>
					<font>{{ cusPre.firstPaymentRatio}}%</font>
				</li>
				<li>
					<p>是否交齐:</p>
					<font>{{cusPre.payFinish==='0'?'否':cusPre.payFinish==='1'?'是':''}}</font>
				</li>
				<li>
					<p>附件:</p>
					<font>
						<ul class="clearfix" id="declareIamge" style="margin-top:6px">
							<li v-for="(item, index) in cusPre.affixList" :key="index" class="declare-follow-list">
								<img v-img:index :src="item.url" v-if="item.fileType.toLowerCase() =='png'
											|| item.fileType.toLowerCase() =='jpg' 
											|| item.fileType.toLowerCase() =='jpeg' 
											|| item.fileType.toLowerCase() =='gif'" />
								<div width="100%" height="100%" class="pic-bg-fj" v-else></div>
								<div class="mask-page" v-if="item.fileType.toLowerCase() !='png'
											&& item.fileType.toLowerCase() !='jpg' 
											&& item.fileType.toLowerCase() !='jpeg' 
											&& item.fileType.toLowerCase() !='gif'"></div>
								<div class="operation-btn" v-if="item.fileType.toLowerCase() !='png'
											&& item.fileType.toLowerCase() !='jpg' 
											&& item.fileType.toLowerCase() !='jpeg' 
											&& item.fileType.toLowerCase() !='gif'">
									<a href="javascript:;" @click="transformationBase(item.url,item.fileType)">下载</a>
								</div>
							</li>
						</ul>
					</font>
				</li>
			</ul>
			<span></span>
			<p>跟进详情</p>
			<hr>
			<div class="custom_gj">
				<div class="cu_gj_con">
					<div class="cu_gj_pot"></div>
					<!-- <p>${follow.createTime?string("yyyy-MM-dd HH:mm:ss")}</p> -->
					<div class="cu_gj_text" v-for="(row, index) in listFlowUp" :key="index">
						<font>{{row.staffName}}&nbsp;&nbsp;{{row.createTime}}&nbsp;<div v-if="row.adviser" style="display:inline-block">置业顾问：【{{row.adviser}}】带看时间【{{row.visitTime}}】</div></font> 
						<font v-if="row.remark">备注：{{row.remark}}</font> 
						<!-- <b>${follow.createTime?string("yyyy-MM-dd HH:mm:ss")}</b> -->
						<ul class="clearfix" id="declareIamge">
							<li v-for="(item, index) in row.affixList" :key="index" class="declare-follow-list">
								<img v-img:index :src="item.url" 
								v-if="item.fileType.toLowerCase() =='png'
									|| item.fileType.toLowerCase() =='jpg' 
									|| item.fileType.toLowerCase() =='jpeg' 
									|| item.fileType.toLowerCase() =='gif'"/>
								<div width="100%" height="100%" class="pic-bg-fj" v-else></div>
								<div class="mask-page"  v-if="item.fileType.toLowerCase() !='png'
									&& item.fileType.toLowerCase() !='jpg' 
									&& item.fileType.toLowerCase() !='jpeg' 
									&& item.fileType.toLowerCase() !='gif'"></div>
								<div class="operation-btn"  v-if="item.fileType.toLowerCase() !='png'
									&& item.fileType.toLowerCase() !='jpg' 
									&& item.fileType.toLowerCase() !='jpeg' 
									&& item.fileType.toLowerCase() !='gif'">
									<a href="javascript:;" @click="transformationBase(item.url,item.fileType)">下载</a>
								</div>
							</li>
						</ul>
					</div>
				</div> 
			<div class="clear"></div> 
			</div>
		</div>
    </div>
</template>

<script>
	import CustomerStatus from '../common/customerStatusComponents.vue'
	import viewer from '../../assets/js/viewer.js'
	export default {
		data() {
			return {
				modalShow:'',
				cusPre:{},
				isShow:false,
				listFlowUp:[],
				latitude:'',
				longitude:'',
				fileList:[],
				isSpecialShow:false,
				rewardFlag:false,
				currentStatus:'',
				roomNum:'认购房号:',
				customerArray:[
					{name:'报备',isActive:false,state:false},
					{name:'到访',isActive:false,state:false},
					{name:'认筹',isActive:false,state:false},
					{name:'认购',isActive:false,state:false},
					{name:'签约',isActive:false,state:false},
					{name:'结佣',isActive:false,state:false}],
				visitReportShow:false,
                visitTime:'',
                remark:'',
                visitWay:'',
                visitWayList:["集体派车","单独派车","自驾"]
			}
		},
		mounted: function() {
			this.findCusPreimeseInfo();
			this.flowUpList();
		},components: {
			CustomerStatus
		},
		methods: {
			transformationBase (data,type){
				// 创建隐藏的可下载链接
				let eleLink = document.createElement('a')
				eleLink.download = ''
				eleLink.style.display = 'none'
				let value = type.toLowerCase()
				let str = ['jpeg', 'jpg', 'png', 'gif']
				if (str.indexOf(value) > -1) {
					// 图片转base64地址
					let Img = new Image()
					Img.setAttribute('crossOrigin', 'anonymous')
					Img.src = data
					Img.onload = function() {
						let canvas = document.createElement('canvas')
						canvas.width = Img.width
						canvas.height = Img.height
						let ctx = canvas.getContext('2d')
						ctx.drawImage(Img, 0, 0, Img.width, Img.height)
						eleLink.href = canvas.toDataURL('image/'+value)
						// 触发点击
						document.body.appendChild(eleLink)
						eleLink.click()
						// 然后移除
						document.body.removeChild(eleLink)
					}
				} else {
					window.open(data)
				}
			},
			findCusPreimeseInfo:function(){
				var _self = this;
				var initData = {
					id:_self.$route.params.id
				}
				var body = {};
				body.params = initData;
				var url = this.utilHelper.apiUrl+"/api/getCPDetail";
				_self.$http.post(url,body).then((response)=>{
					var body = response.body.resData;
					_self.modalShow = body.cpDto.customerStatus;

					const length = body.cpDto.currentStatusMap.index;
					//设置亮灯个数
					for(var i=0;i<length;i++){
						_self.customerArray[i].isActive = true;
					}
					_self.currentStatus = body.cpDto.currentStatusMap.currentStatus;
					if(length>0){
						_self.customerArray[length-1].state = body.cpDto.currentStatusMap.value =='1' ? false:true;
					}
                    if(body.reportVisit){
                        _self.visitReportShow = true;
                        _self.visitTime = body.reportVisit.visitTime;
                        if(body.reportVisit.visitWay){
                            _self.visitWay = _self.visitWayList[body.reportVisit.visitWay];
                        }
                        _self.remark = body.reportVisit.remark
                    }
					_self.cusPre = body.cpDto;
					if(_self.cusPre.index>=5){
						_self.roomNum = '签约房号：'
					}
					if(_self.cusPre.index>4){
						_self.isShow=true;
					}
                    if(_self.cusPre.confirmStatus == 2){
                        _self.isShow = true;
                        _self.roomNum = '认购房号：'
                    }
					if(_self.cusPre){
						var cusPre = _self.cusPre;
						var commission = cusPre.commissionAmount;
						if(commission){
							var commissionJson = JSON.parse(commission);
							var commissionStr = "";
							for(var jsonStr in commissionJson){
								if(commissionJson[jsonStr].typeValue){
									commissionStr += commissionJson[jsonStr].name + " " + commissionJson[jsonStr].typeValue + "" + commissionJson[jsonStr].type + "  ";
								}
							}
							cusPre.commissionAmount = commissionStr;
						}
					}
					

				},(response)=>{
                    console.log(response);
				});
			
			},
            premisesDetail:function() {
			    var _self = this;
			    if(_self.cusPre.premisesDelFlag == '11'){
                    layer.alert("楼盘已被删除");
                }else {
                    this.$router.push({name:'premisesDetail',params:{premisesId:_self.cusPre.premisesId}});
                }
			},
			showCurrentStatus:function(currentStatus){
				this.currentStatus = currentStatus;
			},
			flowUpList:function(){
					//查询客户报备根基记录
					var _self = this;
					var listFlowUpData={
						customerPremisesId:_self.$route.params.id
					};
					var body = {};
					body.params = listFlowUpData
					var url = this.utilHelper.apiUrl+"/api/getCPFollowList";
					_self.$http.post(url,body).then((response)=>{
						if (response.body.resData.result == '1') {
							_self.listFlowUp = response.body.resData.followList;
						}
					});
			},
			//获取图片列表
			getImages(id){
				var _self = this;
				var url = this.utilHelper.apiUrl+'/file/getFiles.do';
				_self.$http.post(url, {"id":id}).then((response)=>{
					var body = response.body;
					if(body.result == 1){
						_self.fileList = body.resData;
						var html = '';
						for(var i = 0; i < _self.fileList.length; i++){
							html += '<li style="float: left;width: 84px;height: 84px;margin-right: 10px;">'
							      + '<img style="width:100%;height:100%;" src="'+_self.fileList[i].url+'"></li>';
						}
						$("#imgList").html(html);
						$('#imgList').viewer();
					}
				});
			}
		}
	}
</script>
<style scoped>
	.template-list:after{content:''; display:block; clear:both; visibility: hidden; overflow: hidden; font-size:0; height:0}
	.declare-follow-list{float: left;width: 100px;height: 80px;overflow: hidden;position: relative;margin-left: 10px;}
	.declare-follow-list img{width: 100%;height: 100%;}
	.declare-follow-list .mask-page{position: absolute;bottom: 0;left: 0;width: 100%;height: 20px;
		background-color: #000;opacity: 0.5;}
	.declare-follow-list .operation-btn{position: absolute;bottom: 0;left: 0;width: 100%;
		height: 20px;}
	.declare-follow-list .operation-btn a{color: #fff;line-height: 20px;text-align: center;width: 100%;display: inline-block;}
	.declare-follow-list:hover .mask-page{display: inline-block}
	.declare-follow-list:hover .operation-btn{display: inline-block}
</style>

